<template>
	<view class="bind">
		<view class="phone">
			<input type="text" placeholder="首次登录需要绑定手机号" v-model="bind" />
			<button @click="sureBind">确认绑定</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useMyStore } from '@/stores/myStore.js';
const store = useMyStore();
onMounted(() => {
	store.getLogin();
});
const bind = ref('');
const sureBind = () => {
	if (bind.value === '') {
		uni.showToast({
			icon: '',
			title: '手机号不能为空'
		});
	} else {
		uni.showModal({
			content: '是否绑定该手机号，绑定后不可修改',
			success: ({ confirm }) => {
				if (confirm) {
					uni.setStorageSync('bind', bind.value);
					uni.setStorageSync('token', store.account);
					uni.switchTab({
						url: '/pages/my/my'
					});
				}
			}
		});
	}
};
</script>

<style lang="scss">
.bind {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	padding: 0 30rpx;
	background: url('~@/static/images/login(3).webp') no-repeat center center fixed;
	background-size: cover;
	box-sizing: border-box;
	.phone {
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		box-sizing: border-box;
		align-items: center;
		padding: 0 20rpx;
		input {
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
			box-sizing: border-box;
			padding-left: 40rpx;
			border-bottom: 2rpx solid #f2f2f2;
			background-color: rgba(255, 255, 255, 0.5);
		}
		button {
			width: 60%;
			height: 80rpx;
			border-radius: 40rpx;
			border: 2rpx solid #55ff00;
			display: flex;
			background-color: #55ff00;
			justify-content: center;
			color: #fff;
			align-items: center;
			margin: 0;
		}
	}
}
</style>
